import { useSelector } from "react-redux";
import { Link, useParams } from "react-router-dom";
import styled from "styled-components";

const Styled = styled.div`
  line-height: 7.5rem;
  margin-bottom: 5rem;
  margin-top: 5rem;
  padding: 3rem;
  border-style: dashed;
  border-color: rgba(56, 189, 248, 1);
  border-width: 1px;
  font-size: 3.75rem;
  span {
    color: rgba(73, 177, 245, 1);
  }
  a {
    color: #333;
    text-decoration: underline;
  }
`;

const Copyright = () => {
  const {
    blogInfo: { blog_config },
  } = useSelector((state) => state.app);
  const articleHref = window.location.href;

  return (
    <Styled>
      <div className="flex">
        <span>文章作者：</span>
        <p>
          <Link>{blog_config.website_author}</Link>
        </p>
      </div>
      <div className="flex">
        <span>文章链接：</span>
        <p>
          <Link to={`/article/${useParams().id}`}>{articleHref}</Link>
        </p>
      </div>
      <div className="flex">
        <span>版权申明：</span>
        <p>
          本博客所有文章除特别声明外，均采用
          <Link
            to="https://creativecommons.org/licenses/by-nc-sa/4.0/"
            target="_blank"
            color="#99a9bf"
          >
            CC BY-NC-SA 4.0
          </Link>
          许可协议。转载请注明文章出处。
        </p>
      </div>
    </Styled>
  );
};
export default Copyright;
